<template>
  <div class="page">
    <NavBar :title="name" :isBack="isBack" />
    <div class="main">
          <List :list='list' />
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import { useRouter,useRoute} from "vue-router";
import NavBar from "../components/NavBar.vue";
import List from "../components/List.vue";
import g1 from "../assets/img/g1.png";
import g2 from "../assets/img/g2.png";
import g3 from "../assets/img/g3.png";
import g4 from "../assets/img/g4.png";
import g5 from "../assets/img/g5.png";
import g6 from "../assets/img/g6.png";
const router = useRouter();
const route = useRoute();
const isBack = ref(true);
let list =[
  {
    imgUrl:g1,
    name:'海底两万里'
  },
  {
    imgUrl:g2,
    name:'西南联大英文课'
  },
  {
    imgUrl:g3,
    name:'图书名称长度文学名家名著：孔乙己'
  },
  {
    imgUrl:g4,
    name:'暴风雨中的孩子'
  },
  {
    imgUrl:g5,
    name:'寻常百姓家1'
  },
  {
    imgUrl:g6,
    name:'我爱天下一切狗'
  },
]
const currentIndex = ref(0);
const name = ref('');
onMounted(() => {
  console.log("mounted");
console.log(router,route.query.name);
name.value = route.query.name;
});
</script>
<style scoped lang="less">
.page {
  width: 100%;
  min-height: 100vh;
  background: #f8f8f8;
  // background-color: rgb(250, 244, 235);
}

</style>
